Привет Кодер! Добро пожаловать в блог Codewithrandom. В этой сегодняшней статье мы узнаем, как создавать стикеры с помощью HTML, CSS и JavaScript. В этой статье мы научимся делать стикеры. Давайте начнем с фундаментальной основы HTML для заметок в надежде, что вы оцените наш сайт.
Традиционные бумажные заметки, которые люди используют для записи кратких заметок и напоминаний, были заменены цифровыми аналогами, известными как онлайн-заметки. Благодаря многократному выпуску одних и тех же заметок, такие онлайн-заметки позволяют нам сохранять наши данные в Интернете и экономить бумагу.
HTML-код для заметок: -
<html> <head> <title>Sticky Note Web Widget</title> <link rel = "stylesheet" type = "text/css" href = "sticky.css"></link> <script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin = "anonymous"> </script> </head> <body> <div> <ul> <li> <a href = "#" contenteditable = "true"> <h2>Title #1</h2> <p>Text Content #1</p> </a> </li> <li> <a href = "#" contenteditable = "true"> <h2>Title #2</h2> <p>Text Content #2</p> </a> </li> <li> <a href = "#" contenteditable = "true"> <h2>Title #3</h2> <p>Text Content #3</p> </a> </li> <li> <a href = "#" contenteditable = "true"> <h2>Title #4</h2> <p>Text Content #4</p> </a> </li> <li> <a href = "#" contenteditable = "true"> <h2>Title #5</h2> <p>Text Content #5</p> </a> </li> <li> <a href = "#" contenteditable = "true"> <h2>Title #6</h2> <p>Text Content #6</p> </a> </li> <li> <a href = "#" contenteditable = "true"> <h2>Title #7</h2> <p>Text Content #7</p> </a> </li> <li> <a href = "#" contenteditable = "true"> <h2>Title #8</h2> <p>Text Content #8</p> </a> </li> </ul> </div> </body> </html>
Мы начнем с добавления структуры проекта, но сначала нам нужно включить некоторые элементы в ссылку, например тот факт, что мы использовали многочисленные файлы CSS и javascript, которые нам понадобятся для подключения. внутри нашего HTML-файла.
<link rel = "stylesheet" type = "text/css" href = "sticky.css"></link> <script src="script.js"></script>
Теперь мы придадим нашим стикерам некоторую структуру. Чтобы сделать основной контейнер для наших заметок, мы будем использовать тег div. Теперь мы создадим список с некоторыми элементами, используя неупорядоченный список, и каждый элемент будет иметь тег привязки ‹a›. Заголовок и абзац для каждого элемента списка будут сделаны с использованием тега ‹h2›. Со ссылками, заголовками и абзацами мы аналогичным образом создадим восемь элементов списка.
Присутствует весь HTML-код заметок. Теперь вы можете просматривать выходные данные JavaScript и CSS. Затем мы создаем CSS для стилей и добавляем JavaScript для основной функциональности Sticky Notes.
Вывод HTML-кода:-
CSS Sticky Note Code: -
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&display=swap');
div {
margin: 20px auto;
width: 70%;
font-family: 'Lato';
padding: 5px;
background:#666;
color:#fff;
}
*{
margin:0;
padding:0;
}
h4 {
font-weight: bold;
font-size: 2rem;
}
p {
font-family: 'Reenie Beanie';
font-size: 2rem;
}
ul,li{
list-style:none;
}
ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul li a{
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:10em;
width:10em;
padding:1em;
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
transition: transform .15s linear;
}
ul li{
margin:1em;
}
ul li:nth-child(odd) a{
transform:rotate(-4deg);
position:relative;
top:5px;
}
ul li:nth-child(even) a{
transform:rotate(4deg);
position:relative;
top:5px;
}
ul li:nth-child(3n) a{
transform:rotate(-3deg);
position:relative;
top:-5px;
}
ul li:nth-child(5n) a{
transform:rotate(5deg);
position:relative;
top:-10px;
}
ul li a:hover,ul li a:focus{
box-shadow:10px 10px 7px rgba(0,0,0,.7);
transform: scale(1.25);
position:relative;
z-index:5;
}
ul li:nth-child(even) a{
position:relative;
top:5px;
background:#cfc;
}
ul li:nth-child(3n) a{
position:relative;
top:-5px;
background:#ccf;
}
Шаг 1.Используя URL-адреса шрифтов Google, мы сначала импортируем несколько новых шрифтов Google для прикрепленного приложения. Используя свойство font-family в селекторе приложения для викторины, мы будем использовать файл font. Эти шрифты помогут придать веб-сайту несколько стилей шрифта. Также с помощью универсального селектора (*) мы установим отступы и поля проекта равными нулю.
Шаг 2. Теперь мы добавим поля в 20 пикселей сверху вниз и автоматически слева и справа с помощью селектора тегов (div). Цвет фона контейнера div — темно-серый, его ширина установлена на 70%, а семейство шрифтов — «Lato» с белым шрифтом.
Шаг 3.Теперь мы будем использовать селектор тегов, чтобы установить элементы внутри нашего контейнера для заметок (h4, p). Мы просто изменим текст и изменим размер и вес шрифта в соответствии с предпочтениями пользователя.
Шаг 4.Теперь мы стилизуем номер элемента списка, который мы используем в качестве заметки, используя селекторы тегов неупорядоченного списка (ul) и элемента списка (li). Мы установим отображение на «flex», а затем центрируем содержимое, используя атрибут justify-content. Аналогичным образом мы ввели дополнительные элементы списка.
Вывод Html + Css:
Sticky Notes с использованием HTML, CSS и JavaScript
Исходный код Sticky Notes Javascript: -
$(document).ready(function () {
all_notes = $("li a");
all_notes.on("keyup", function () {
note_title = $(this).find("h2").text();
note_content = $(this).find("p").text();
item_key = "list_" + $(this).parent().index();
data = {
title: note_title,
content: note_content
};
window.localStorage.setItem(item_key, JSON.stringify(data));
});
all_notes.each(function (index) {
data = JSON.parse(window.localStorage.getItem("list_" + index));
if (data !== null) {
note_title = data.title;
note_content = data.content;
$(this).find("h2").text(note_title);
$(this).find("p").text(note_content);
}
});
});
Разработаем готовую функцию на javascript, которая будет запускаться одновременно с сайтом, как только он загрузится. Затем, используя событие клавиши вверх, мы выберем все элементы li из документа и создадим массив всех заметок, который будет хранить содержимое в переменной. Затем текст будет заархивирован и проиндексирован в приложении «Все заметки».
Теперь, когда мы закончили наши заметки. Вот наш обновленный вывод с Html, Css и JavaScript. Надеюсь, вам понравились заметки. вы можете увидеть выходное видео и скриншоты проекта. Смотрите другие наши блоги и получайте знания в области фронтенд-разработки.
Спасибо!
В этом посте мы узнаем, как создавать Sticky Notes с помощью HTML, Css и JavaScript. Если мы допустили ошибку или какую-либо путаницу, пожалуйста, оставьте комментарий, чтобы ответить или помочь вам в легком обучении.
Автор — Code With Random/Anki
Какой редактор кода вы используете для этого Sticky Notes?
Я лично рекомендую использовать VS Code Studio, он прост и удобен в использовании.
Является ли этот проект адаптивным или нет?
Да, Sticky Notes — адаптивный проект.
Каковы преимущества онлайн-заметок?
Обеспечить вам легко записать важные строки в любом месте в любое время. Кроме того, онлайн-заметки доступны 24 часа в сутки, которыми мы также делимся с нашими друзьями.
