کد لیست ویو به همراه فیلم پیش نمایش- رایگان

طراحی قالب, کد های آماده آخرین بروزرسانی : ۲۱ بهمن ۱۳۹۸

سلاملکم! 😎

دوستان طراح امیدوارم حالتون بهاری باشه 🙄 ما روی قولمون بودیم و یه لیست ویو با قابلیت حذف و اضافه کردن المان و گرافیک بسیار عالی آماده کردیم واستون!

هرگونه کپی برداری پیگرد قانونی دارد! 😯 ( شوخی کردم کدشو از همینجا میتونید کپی کنید و لینک دانلود فایلشو پایین مطلب گذاشتم براتون! )

حتما بخوانید:

چگونگی تغییر آدرس در بخش تنظیمات وردپرس

مشاهده مقاله

کد لیست ویو به همراه فیلم آموزشی - رایگان

کد های html را مشاهده کنید:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>کد لیست ویو از الماس وب</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Teko:300,400,500,600,700'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- www.almasweb.org -->
  <link href="https://fonts.googleapis.com/css?family=Markazi+Text" rel="stylesheet">
<h1>الماس وب</h1>
<div id="app"></div>
<a target="_blank" href="https://almasweb.org"><small>www.almasweb.org</small></a>

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js'></script>
<script  src="js/index.js"></script>
<!-- www.almasweb.org -->
</body>
</html>

کد های Css را مشاهده کنید:

/*www.almasweb.org*/
*{
  font-family: 'Markazi Text', serif;
  direction: rtl;
}
body {
    font-family: 'Markazi Text', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 2em;
    box-sizing: border-box;
    background: #833ab4;
    background: #11998e;
    background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
    background: linear-gradient(to right, #38ef7d, #11998e);
    color: #fff;
}
html {
  box-sizing: border-box;
  height: 100%;
}
a {
    text-decoration: none;
    color: #fff;
}
small {
  opacity: .;
  margin-top: 20px;
  display: block;
}
h1 {
  color: #fff;
  text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
  text-align: center;
  margin-bottom: 0;
  font-size: 2em;
  line-height: 1.3em;
  font-weight: bold;
  margin-top: 0.67em;
}
.todo-list {
  padding-top: 10px;
  width: 400px;
}
.todo {
  background: #fff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  padding: 3px 10px;
  font-size: .7em;
  margin-bottom: 6px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
}
.todo-text {
  cursor: pointer;
}
.todo-completed {
  text-decoration: line-through;
}
button {
  border: 0;
  outline: 0;
  cursor: pointer;
  font-size: 18px;
}
.todo button {
  color: #f37070;
  background: transparent;
}
input {
    text-align: right;
    background: #fff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    padding: 7px 10px;
    font-size: .5em;
    color: #000;
    outline: 0;
    border: 0;
    flex: 1;
}
form {
  border-top: 1px solid;
  display: flex;
  padding-top: 10px;
  margin-top: 10px
}
form button {
    color: #2980B9;
    background: #fff;
    padding: 0 15px;
    border-radius: 4px 0 0 4px;
}
/*www.almasweb.org*/

کد های javascript را مشاهده کنید:

/*www.almasweb.org*/
const { useState } = React;

const AddTaskForm = ({ addTask }) => {
  const [value, setValue] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    value && addTask(value);
    setValue("");
  };

  return (
    React.createElement("form", { onSubmit: handleSubmit },
    React.createElement("input", {
      type: "text",
      value: value,
      placeholder: "\u06CC\u06A9 \u0639\u0646\u0648\u0627\u0646 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F",
      onChange: e => setValue(e.target.value) }),

    React.createElement("button", { type: "submit" }, React.createElement("i", { class: "fas fa-plus" }))));


};

const ToDoList = () => {

  const [tasks, setTasks] = useState([{
    text: "لایک",
    isCompleted: false },
  {
    text: "کامنت",
    isCompleted: false },
  {
    text: "اشتراک گزاری",
    isCompleted: false }]);


  const addTask = text => setTasks([...tasks, { text }]);

  const toggleTask = index => {
    const newTasks = [...tasks];
    newTasks[index].isCompleted = !newTasks[index].isCompleted;
    setTasks(newTasks);
  };

  const removeTask = index => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    React.createElement("div", { className: "todo-list" },
    tasks.map((task, index) =>
    React.createElement("div", { className: "todo" },
    React.createElement("span", { onClick: () => toggleTask(index), className: task.isCompleted ? "todo-text todo-completed" : "todo-text" },
    task.text),

    React.createElement("button", { onClick: () => removeTask(index) }, React.createElement("i", { class: "fas fa-trash-alt" })))),


    React.createElement(AddTaskForm, { addTask: addTask })));


};

ReactDOM.render(React.createElement(ToDoList, null), document.getElementById('app'));
/*www.almasweb.org*/

 

ویدئوی نمونه کد :

 

دانلود تمامی کد ها در فایل zip

دانلود کدها

 

لطفا نظرتونو بگید که هم واسه همین فایل استفاده کنیم و آپدیتش کنیم هم واسه طراحی های بعدی بهمون کمک کنید!

موفق باشید 😉

5/5 - (4 امتیاز)

موضوعات مرتبط :
مهدی ایبک ابادی

مهدی ایبک آبادی هستم ، موسس و بنیانگذار الماس وب، متخصص دنیای طراحی سایت و برنامه بنویسی اندروید و علاقه مند به وردپرس. 15 سال در حوزه برنامه نویسی و 7 سال به طور جدی در حوزه طراحی وبسایت و اپلیکیشن اندروید فعالیت دارم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پس زمینه نارنجی پس زمینه دایره

مطالب مرتبط با این موضوع