2021 Anime That You Should Watch

Winter 2021 Anime

Create a Web App that displays the synopsis of new anime. Many new anime emerged in 2021. Since 2021 is about to end, here are 5 such Anime you should be watching.

Must Watch Anime In 2021 

Blue Period

Art is a blessing, the artists with unique art are geniuses. One doesn’t easily give up on studies and follow the passion. Yatora Yaguchi in spite of being a clever student in the class, he found deep admiration towards painting. It is not easy for every artist to make a living through art. Yaguchi comes from a middle-class family which becomes difficult for him to afford private college. 

Yatora decides to join art college and follow his passion. We can quite relate a lot through this anime, somewhere inside us, we feel like doing something but never try to implement it. It takes guts to turn passion into a living.

Genre: Drama, Slice Of Life

Episodes: 5 ongoing

Komi Can’t Communicate 

This year we have got a good number of Slice of Life-based Anime. Komi can’t communicate is one of that kind. Shouko Komi despite her looks, finds it difficult to communicate herself to others. The entire school adores how beautiful Komi is. Tadano Hitohito a classmate of Komi, was the first person to recognize that Komi is terrible at communicating. 

Komi never got a chance to make a friend due to her Speech Anxiety. Tadano becomes her first friend and he helps Komi to achieve her goal of making 100 friends. Since Komi can’t communicate, how did she even communicate with Tadano? It’s not like Komi can’t speak, she just can’t bring herself to speak. Moreover, she reached out to Tadano through writing on the class board. And Tadano realized what he had to do. 

Genre: Comedy, Slice Of Life, Romance

Episodes: 2 ongoing

Mieruko-chan

I still can’t get over through the opening of Mieruko-chan. I literally have to calm my brain by saying, Mou Yamate. Miko, the female main protagonist has a kind of supernatural powers that enables her to see horrific monsters. Every time she looks around she finds a creepy ghost, that keeps asking her whether she could see them. Poor Miko, ignores them every time. Since I haven’t read the manga it is a mystery what lies ahead in this story. But the comic time with horror anime is a bing.

Genre: Horror, Comedy, Supernatural

Episodes: 5 ongoing

Platinum End

When I heard Death Note creators are the creators of the Platinum end I was soo hyped. I was eagerly waiting for this anime, but the first episode didn’t meet my expectations. I might be wrong here since it is just the beginning, we don’t know how the plot will go on. Since we are talking about Death Note creators, we can’t underestimate them. There are so many anime even though their first episode was not up to the mark, the ending left audience stunned. And I get a feeling that the selection of God concept will turn out epic.

Ah shit! I got carried away and didn’t explain the story plot. Mirai Kakehashi tries to commit suicide, as he was always abused by his aunt and uncle. He jumps off the climbing, fortunately, he was saved by an angel Nasse. Nasse gives Mirai supernatural powers. Mirai is one among the thirteen people, who are elected as the God candidates. 

Genre: Action, Psychological, Mystery

Episodes: 5 ongoing

Takt Op.Destiny

To all Music lovers, here is an anime recommendation for you. Moreover, Takt op Destiny is produced by two big house studios Mappa and Madhouse, the animation is peak. With Animation and Music at their best, the story is completely unique. Action scenes through Musicart, now that is something new. The visual effects are just amazing and talking about the plot the power system is very unique. 

Power System that involves Music within it is overwhelming. The Conductor technically Human wields Musicarts in order to defeat D2s. The Conductor and Musicarts are those that try to protect Music. Whereas D2s are monsters that hate Music and emerge whenever Music is played. The weapon used to defeat D2s is Music. 

Genre: Fantasy, Music

Episodes: 4 ongoing

Javascript DOM Tutorial

Check out this website, which shows the Synopsis of 2021 Anime: https://2021anime.netlify.app/. You can create such a website as well. Follow the instruction.

Now that we have 5 Anime names and their description, create five buttons using HTML. These buttons are named after the above Anime names of 2021. 

The main intention of using Anime names as buttons is because it’s the best way to learn JavaScript DOM Tutorial hands-on. Writing a program relating to something will stick in the head for a long time, trust me.

When you open any webpage in a browser, the HTML of the page is loaded and rendered visually on the screen.
To accomplish that, the browser builds the Document Object Model of that page, which is an object-oriented model of its logical structure.

innerHTML

innerHTML is an element property, which modifies the content of the HTML.

Syntax:
HTMLElementObject.innerHTML = text

Simple Example:
<p id="para">2021 Anime</p>

<button type="button"
onclick="document.getElementById('para').innerHTML = 'I modified the content';">
Change Me.
</button>

Code Example:
<button onclick="blueperiod()" id="blue-period">
   Blue Period
</button>
<p id="anime-info">
  Change Me
</p>

//inside JavaScript Code

function blueperiod() {
onclick = document.getElementById("anime-info").innerHTML = "Blue Period";
}

Now when the button has clicked the text in the paragraph “Change Me” is modified to Blue Period.

style

The Style object represents an individual style statement, you can even modify the style properties of an existing element.

Syntax:
HTMLElementObject.style.property = value

Simple Example:
<p id="para">2021 Anime</p>

<button type="button" 
onclick="document.getElementById('para').style.color = 'red'">
Change Color.</button>

Code Example:
<p id="show" style="display: none;">
Genre: 
<span id="genre">
</span>
</p>

//Inside Javascript
onclick = document.getElementById("show").style.display = "inline";
onclick = document.getElementById("genre").innerHTML = "Slice Of Life \n Drama";

If you check closely in Web App, the Genre is represented just once. But using display none it is hidden. Then using Javascript DOM you can change the display style to inline.

Check out this W3School Tutorial for more. 

CSS Button Style

How to Make CSS Button Transparent and add Hover effects?

Styling the button through CSS is a simple task. In order to make the Web App look cool, styling the button is a must. Here is the code to style a button through CSS.

#anime-btns button {
    background-color: transparent;
    width: 50%;
    height: 50%;
    padding: 0.5em 3em;
    border: 0.1em solid black;
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 7px;
    box-shadow: 2px 2px 2px rgb(98, 151, 151);
}

#anime-btns button:hover {
    color: #000;
    background-color: rgb(130, 255, 255);
    text-decoration: underline;
}

Also read: Your Lie In April

How To Deploy A Website On Netlify?

You are all set with the website. The only thing left is to deploy it. Fortunately, you have many host providers that let you host static websites free of cost. But the domain will be different, which you can’t avoid for a free cost. Since we will be using Netlify to deploy our static website, the domain will be <name>.netlify.app. 

Follow these step-by-step guides to deploy your website. You can check this article of mine on GeeksforGeeks, which provides a complete tutorial on it.

2021 Anime Website Link After deployment: https://2021anime.netlify.app/

Conclusion

Something is missing. We might have seen the above 5 Animes that we should be watching. But in the air of new anime, let’s not forget about One Piece that is still running successfully. One Piece is dominating Anime for over two decades. It is true that it is long, but it is worth a try. Once you start, you will realize that One Piece needs more episodes.  

And now there, we can’t ignore Demon Slayer that will be released in late December 2021. 2022 is going to be a good year for Anime.

Download the source code and modify the code for your needs.

If you like the content, support us by Buying a Coffee