NEW BOT Телеграм, страница

#no21 #DOM بعد از دو چالش خفن، یه چالش ساده تر داریم از DOM این عملکردی که برای این textarea میبینید عملکرد بسیار معمولی هست که قطعا داخل سایت های مختلف دیدید امروزم تعطیله دیگه بشینید حلش بکنید 🔥 راستی پیامی که ریپلای زدم رو بخونید و چالش داخل گیت هاب…

کد های HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <noscript defer src="./main.js"></noscript>
    <noscript>Document</noscript>
  </head>
  <body>
    <div class="container">
      <span class="text">Write something about yourself</span>
      <div class="text-box">
        <textarea
          id="story"
          type="text"
          placeholder="Tell about yourself..."
          maxlength="180"
        ></textarea>
        <p class="count"><span class="counter">180</span> / 180</p>
      </div>
    </div>
  </body>
</html>

کد های CSS:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: cursive;

  height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}

.text {
  font-size: 2rem;
  color: black;
}

#story,
button {
  border: none;
  outline: none;
  height: 20rem;
  width: 40rem;
  border-radius: 1.5rem;
  background-color: #000000;
  padding: 2rem;
  color: white;
  font-size: 2rem;

  transition: all 0.3s;
}

button {
  height: auto;
  width: auto;
}

button:hover {
  cursor: pointer;
}

#story::placeholder {
  transition: all 0.3s;
}

#story:focus::placeholder {
  opacity: 0;
}

.text-box {
  position: relative;
}

.count {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  color: white;
}

.counter.red {
  color: red;
}

@js_challenges
@js_masters_gp

🔥4👌3👎1😁1

486 viewsMehrshad, edited 10:33

16:35

Media is too big

VIEW IN TELEGRAM

#answer
#no21

بچه ها این ویدیو رو من سه بار compress کردم که حجمش بیاد پایین

چون دوتا ویدیو شد که بعد با کپ کات به هم چسبوندم، حجمش شد 160 مگ 😐

بعد از دو سه بار فشرده کردن این شده حجمش
حالا شما ریکشنارو بکوبید که هممون بعد از این چالش کاربردی انرژی بگیریم 🔥

@js_challenges
@js_masters_gp

🔥14👍2

431 viewsMehrshad, edited 17:05

#GitHub #DOM از همین امروز، چالش های داخل گیت هاب استارت میخوره ✌️ در این ویدیو ساختار کلی قرارگیری پروژه های DOM و چالش های جاوااسکریپت رو براتون توضیح دادم اگرم باز هم سوالی داشتید از خودم بپرسید اما به طور کلی ساختار این ریپازیتوری به این صورته: یک…

موافق هستید در مورد گیت هاب یه ویدیوی مختصری بگیرم در حد کمتر از ۳۰ دقیقه براتون توضیحش بدم؟

Anonymous Poll

نه 😐

39%

آره ولی اگر یه ویدیوی خوب از یوتیوب براش معرفی کنی بهتره 👍

52%

قطعا موافقم 🔥

85 voters411 viewsMehrshad, 17:10

const arr = [1,2,3];
arr [ -1 ] = 0;
console.log(arr.length); #TIPS_TRICS

Anonymous Quiz

👌10

90 voters395 viewsAmir Nobari, 20:25

به ویس توضیحات گوش کنید

#js_challege
#no22
#medium

هشتگ های مرتبط:
#validation
#regex

لینک سوال:
https://www.codewars.com/kata/52e1476c8147a7547a000811/train/javanoscript

@js_challenges
@js_masters_gp

🔥7👍2

470 viewsMehrshad, edited 04:28

به ویس توضیحات گوش کنید #js_challege #no22 #medium هشتگ های مرتبط: #validation #regex لینک سوال: https://www.codewars.com/kata/52e1476c8147a7547a000811/train/javanoscript @js_challenges @js_masters_gp

2:03

توضیحات سوال

👍8

431 viewsMehrshad, edited 04:31

5:35

Media is too big

VIEW IN TELEGRAM

#answer
#no22

هوش مصنوعی؟! بله هوش مصنوعی 😄

@js_challenges
@js_masters_gp

😁7

422 viewsMehrshad, edited 14:38

#Out_Of_IDE
#Fun

درگیری شما کدومه؟ بالایی یا پایینی 😂؟

@js_challenges
@js_masters_gp

❤10👎3😁3

420 viewsMehrshad, edited 17:58

#quick_challenge

این چالش ها رو جوابشون رو دوستانی که فرستادن داخل گروه توضیح میدن ❤️
@js_masters_gp

فقط خواهشاً اول خودتون جواب بدید بعد جواب رو داخل گروه بخونید، با تشکر 😁

👍6

397 viewsMehrshad, edited 07:02

#quick_challenge این چالش ها رو جوابشون رو دوستانی که فرستادن داخل گروه توضیح میدن ❤️ @js_masters_gp فقط خواهشاً اول خودتون جواب بدید بعد جواب رو داخل گروه بخونید، با تشکر 😁

خروجی؟

Anonymous Quiz

32%

58%

👍2

100 voters382 viewsMehrshad, 07:04

یکی دیگه بزارم؟!

Sure 👍
Nah! 👎

👍22👎1🔥1

345 viewsMehrshad, 08:03

#quick_challenge

جواب داخل گروه هست ✌️

@js_masters_gp

👌4

380 viewsMehrshad, edited 08:13

#quick_challenge جواب داخل گروه هست ✌️ @js_masters_gp

خروجی؟

Anonymous Quiz

38%

63%

🔥10

96 voters377 viewsMehrshad, 08:14

یکی دیگه؟ حسین جان امروز داره میترکونه 😂🔥

بزارم 👍
نزارم 👎

👍21👎1

359 viewsMehrshad, 09:14

#quick_challenge

جواب رو داخل گروه پیدا میکنید 👌

@js_masters_gp

413 viewsMehrshad, 09:32

#quick_challenge جواب رو داخل گروه پیدا میکنید 👌 @js_masters_gp

خروجی؟

Anonymous Quiz

111 voters494 viewsMehrshad, 09:33

([] == ![])

Anonymous Quiz

👍5👎1

147 voters686 viewsAmir Nobari, 10:58

موافق هستید در مورد گیت هاب یه ویدیوی مختصری بگیرم در حد کمتر از ۳۰ دقیقه براتون توضیحش بدم؟

عزیزان امروز با توجه به این نظرسنجی ویدیوی گیت هاب رو براتون آپلود میکنم تا انشالا همه بتونید از این به بعد از گیت هاب استفاده کنید 🔥
ولی با توجه به چالش های پر و پیمونی که این هفته داشتیم، امروز از بابت چالش استراحت میکنیم ❤️

حالا به نظرتون امروز بیشتر روی تیپ و تریک وقت بزاریم یا یه مقدار بگیم و بخندیم؟

با هم بخندیم 🔥
فقط چالش های کوچیک مثل دیروز ❤️

عزیزانی که دنبال چالش های کوچیک هستید داخل گروه عضو باشید که جوابشون اونجا قرار میگیره 💻
@js_masters_gp

❤8🔥1

396 viewsMehrshad, edited 05:18

0:14

This media is not supported in your browser

VIEW IN TELEGRAM

قبل از اینکه چالش های امروز رو شروع کنیم میخواستم نظرتونو بدونم که آیا این ویدیو با ترنزیشن هاش هماهنگه؟
در رابطه با پراپرتی border برای CSS هست

اگر هم نظری دارید در مورد ویدیو خوشحال میشم بدونم ❤️

و اینکه دوست دارید از این نوع پست ها هم با هشتگ #CSS داخل چنل قرار بگیره یا خیر
خلاصه نظرتون رو کامل بگید دیگه در موردش

👍12

420 viewsMehrshad, edited 07:16

میریم برای چالشای امروز 🔥

👍3

361 viewsMehrshad, 10:17

#quick_challenge

پاسخ داخل گروه توسط طراحش داده میشه ✌️

@js_masters_gp

👍1

412 viewsMehrshad, 10:22

About

Blog

Apps

Platform