JavaScript
Posted By Sebastian

Building A Vanilla JavaScript Todo App From Start To Finish | EP 3: Styling The App


Subscribe On YouTube

Episodes

Part of building a Vanilla JavaScript Todo App is adding a modern and nice-looking user interface. In this episode we’re going to add the necessary CSS code which is needed to style the todo app and finish building the UI.

When inserting the HTML code in the last part we’ve already made use of several CSS classes which have not been defined yet. Those classes will be defined in styles.css now. Furthermore we’re going to define styling for standard HTML elements as well.

In the following you can see the complete CSS code which needs to be inserted into styles.css:

html {
    height: 100vh;
    min-width: 600px;
    background-image: linear-gradient(130deg, #FFFFFF,#1C3F80);
    background-repeat: no-repeat;
    background-size: auto;
}

.container {
    width: 600px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    font-family: 'Raleway', sans-serif;
}

.logo {
    display: flex;
    margin: auto;
    flex-direction: column;
    max-width: 500px;
    padding: 1.5rem 0;
    align-items: center;
}

.main {
    padding: 20px;
}

form {
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 5px;
    display: flex;
}

input[type="text"] {
    height: 30px;
    outline: 0;
    border: none;
    font-size: 1rem;
    font-family: 'Raleway', sans-serif;
    color: #595959;
    flex-grow: 1;
}

button {
    font-size: 1.5rem;
    background-color: #FFFFFF;
    outline: 0;
    border: none;
    color: #595959;
}

button:hover {
    color: lightcoral;
}

.todoList {
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-top: 20px;
    padding: 10px 25px;
    height: 100%;
    overflow-y: auto;
}

ul {
    padding-left: 0px;
    list-style: none;
}

li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgrey;
    padding: 15px 0;
    font-size: 1rem;
    color: #595959;
}

i {
    pointer-events: none;
}

.todo-item {
    flex-grow: 1;
}

.clearAll {
    display: flex;
    justify-content: flex-end;
    padding: 10px 3px;
    cursor: pointer;
    font-size: 0.9rem;
}

.clearAll:hover {
    color: lightcoral;
}

After having inserted the CSS code the application should then look like the following:

10.png

What’s Next?

In the next episode we’re starting adding the JavaScript code which is needed to get the application fully working.

Advertisement: The Complete JavaScript Course: Build Real Projects

Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack

The Complete JavaScript Course: Build Real Projects *

  • Go from a total beginner to an advanced JavaScript developer
  • JavaScript and programming fundamentals: variables, boolean logic, if/else, loops, functions, arrays, etc.
  • Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs
  • A true understanding of how JavaScript works behind the scenes
  • Practice your new skills with coding challenges (solutions included)

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.