DEV Community: Enes Kılıç

Todo App - ES5 & ES6 - Local Storage

Enes Kılıç — Thu, 16 Dec 2021 22:44:17 +0000

In this post, we will make a Todo Application with Vanilla Javascript.

If you want to see other features and ES6 - Local Storage version look this Repository

Step 1: Create UI

I used Bootstrap Library in UI.

  <div class="container py-5">
    <!-- Title -->
    <h1 class="text-center">TODO App</h1>

    <div class="col col-md-8 col-lg-6 my-5 mx-auto">
      <!-- Form -->
      <form class="form">
        <div class="form-group d-flex">
          <input
            type="text"
            class="input form-control bg-transparent text-light"
            placeholder="Add TODO"
          />
          <div class="px-2"></div>
          <button type="submit" class="btn btn-success px-4">Add</button>
        </div>
      </form>

      <!-- Todo Table -->
      <table class="table table-dark table-bordered table-responsive text-center mt-5">
        <thead>
          <tr>
            <td><strong>Task</strong></td>
            <td></td>
          </tr>
        </thead>
        <tbody class="todo-list"></tbody>
      </table>
    </div>
  </div>

Step 2: Add functionality with Javascript.

"let" and "const" keywords are belongs to ES6.

// A function for less code.
function select(query) {
  return document.querySelector(query);
}

// Variables
const form = select(".form");
const list = select(".todo-list");
const input = select(".input");

// Objects
function Todo(task) {
  this.task = task;
}

function UI() {}

UI.prototype.create = function (todo) {
  const html = `
    <tr>
      <td>${todo.task}</td>
      <td><button class="btn btn-sm btn-danger delete">Delete</button></td>
    </tr>
        `;
  list.innerHTML += html;
};


// Functions
function createTodo(e) {
  const task = input.value;

  // Constructors
  const ui = new UI();
  const todo = new Todo(task);

  // Add to list
  ui.create(todo);

  // Clear Input

  // Prevent form submit
  e.preventDefault();
}

// Listeners
form.addEventListener("submit", function (e) {
  createTodo(e);
});

If you want to see other features and ES6 - Local Storage version look this Repository

Custom Video Player

Enes Kılıç — Tue, 14 Dec 2021 14:28:48 +0000

How to create Custom Video Player with Javascript. You can add other features with the following source code.

Source Code

HTML-CSS Projects With Source Code

Enes Kılıç — Sun, 12 Dec 2021 14:16:30 +0000

HTML and CSS projects with source code.

Github Repository

Content

Responsive Personal Portfolio
Responsive Dashboard
Responsive Netflix Landing Page
Video Background
Login Page

Responsive Personal Portfolio - Back to top

Responsive Dashboard - Back to top

Responsive Netflix Landing Page - Back to top

Video Background - Back to top

Login Page - Back to top

Accordion Panel with HTML-CSS

Enes Kılıç — Fri, 10 Dec 2021 17:58:47 +0000

In this post, we will make an Accordion Panel. We can make this component with HTML <details> tag without Javascript.

If you want to see all HTML-CSS projects look this Repository

<details>
 <summary>Panel Title</summary>

 Panel Content

</details>

That's it. Toggles Panel content on clicking the Panel Title. You can make different components with using this tag.

Netflix FAQ Table with some styles.

Form Validation with CSS

Enes Kılıç — Fri, 03 Dec 2021 21:51:27 +0000

In this post, I will show you how to validation the required form fields with CSS.

If you want to see full version of this project or all HTML-CSS projects look this Repository

Create HTML

  <form>

    <!--==== Add required attribute to input tag  ====-->
    <input type="password" required />

    <button type="submit"> Login </button>

  </form>

CSS

form:invalid button {
  pointer-events: none;
}

form:valid button {
  pointer-events: initial;
}

My output with some styles

Theming with CSS variables.

Enes Kılıç — Thu, 05 Aug 2021 00:30:56 +0000

In this article, I will talk about how to make theming with CSS variables. We will see again the importance of using variables with this example.

Step 1: Define your variables.

/* Define your variables to the root. */
:root {
  --black: #181818;
  --white: #f5f7f7;
  --fade:  150ms;
}

/*  
The variables of the tag with the data-theme="light" attribute.
We will then apply this property to the HTML tag with javascript,
but you can define it manually.
*/
[data-theme="light"]{
  --color-text: var(--black);
  --color-background: var(--white);
}

/* Change variables for dark theme. */
[data-theme="dark"]{
  --color-text: var(--white);
  --color-background: var(--black);
}

/* And apply styles to document root element. */
html {
  color: var(--color-text);
  background-color: var(--color-background);

  /* for smooth color transitions. */
  transition: var(--fade) color, var(--fade) background-color;
}

Step 2: Add functionality with javascript.

// Call theme value from browsers local storage.
var theme = localStorage.getItem("theme");
// Root element of the document.
const _root = document.documentElement;

// Check if local storage has no theme value, define the initial value.
!theme && localStorage.setItem("theme", "light");

// Update theme value.
theme = localStorage.getItem("theme");

// Apply theme value to document root element.
_root.setAttribute("data-theme", theme);

// Function for change theme.
// You can define this function to the a button or call this any way.
function changeTheme() {
  theme === "light"
    ? localStorage.setItem("theme", "dark")
    : localStorage.setItem("theme", "light");

  // Update theme value
  theme = localStorage.getItem("theme");

  // Apply theme to document root element
  _root.setAttribute("data-theme", theme);
}

Result

Create your mini CSS framework.

Enes Kılıç — Sat, 31 Jul 2021 02:44:35 +0000

As developers, we want to write less and cleaner code. In this post i will show you a method that we can use in CSS for modular and cleaner code.

These codes are written with SCSS.

// Create variables
$red:                 #ff0000;
$blue:                #0000ff;
$green:               #008000;

// Create variables map
$colors: (
  "red":              $red,
  "blue":             $blue,
  "green":            $green
);

// And loop for all variables
@each $name, $value in $colors {
  .color-#{$name}      { color: $value };
  .background-#{$name} { background: $value };
}

// Output
.color-red       { color: red};
.color-blue      { color: blue};
.background-red  { background: red};
.background-blue { background: blue};
etc.

You can expand it according to your needs.