After fetching api which is https://api.hatchways.io/assessment/students doing some steps to create a matching website page. I'm stuck on a step where we have to add a text input field to add tags for a specific student. here is the video showing what to do.
Please check below link which shows the pdf file showing the full assessment to be done.
CodePudding user response：
<html>
<head>
<title>Tags</title>
<style>
#tags_here{padding: 5px;
font-size: 16px;
border: 0;
outline: none;
font-family: 'Rubik';
color: #333;
flex: 1;
}
input {
outline: 0;
border-width: 0 0 2px;
border-color: blue
}
input:focus {
border-color: green
}
.tag_text {
margin: 5px;
padding: 5px 6px;
border: 1px solid #ccc;
border-radius: 3px;
background: #eee;
color: #333;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
cursor: default;
}
.del{
font-size:25px;
font-weight:bold;
}
</style>
</head>
<body>
Input tags here: <br/> <input type="text" id="tags" placeholder="Add a tag" onkeydown="search()">
<div id="tags_here"></div>
<script>
var text = document.getElementById("tags");
function search ()
{
if(event.keyCode == 13) {
var x = Object.assign(document.createElement('SPAN'), { className: 'tag_text' });
var el = Object.assign(document.createElement('SPAN'), { className: 'del' }, {textContent: '×'});
console.log(el)
x.innerHTML = text.value ' ' ' ';
document.getElementById('tags_here').appendChild(x);
x.appendChild(el);
document.getElementById("tags").value ="";
check();
}
}
function check () {
var remove = document.querySelectorAll(".del");
for (var i = 0; i < remove.length; i ) {
remove[i].addEventListener("click", function () {
//Add function here
this.parentNode.remove();
});
}
}
</script>
</body>
</html>
Can't exactly do what I saw in that video but can give you the code to create tags which I also have made recently although I am beginner too i tried it you can see it here https://codepen.io/gauntletww/pen/JjpPgLV and I cannot snippet the code as I am currently on android, any feedbacks for me would be appreciated too.
CodePudding user response：
in App.js,
Student component will have addTag prop as below
<Student key={student.id} data={student} addTag={(e) => addTag(e, student)} />
const addTag = (e, student) => {
const { tags } = student;
if(e.key === "Enter" && e.target.value) {
if(student.tags.indexOf(e.target.value) != -1) {
tags.push(e.target.value);
e.target.value = "";
setStudents([...students, student]);
}
}
};
the updated students data will cause a Student component to rerender that will display new tags being added in student.tag
in Student.jsx, map through tags and display it in Student component