create account

Two cool little CSS & JS projects by anomadsoul

View this thread on: hive.blog |  peakd.com |  ecency.com
hive-169321 · @anomadsoul · (edited)
$54.33
Two cool little CSS & JS projects
I know, it seems that I already lost interest in Javascript and CSS since I have only posted twice about coding and developing in two weeks, but it is not the case, in fact I keep grinding my developer skillset but I haven't had time to post about it, but hopefully in a couple of days I'll be able to post a monster post I've been working on regarding **Hive wallets interface** because let's be honest, those we have while they are pretty and useful, are kind of leaving *something* on the table, and I call grabs.

This is third post already about little projects based off online ideas and my plan is to join all of these ideas once I am ready and create my own CV website of my own where I'll showcase all that I've learned in a sort of interactive website. Heads up, I'm getting there, slowly but steady, more slowly than steady to be honest but what the hell, slow and steady wins the race.

In the meantime, I will leave you with two project Ideas based off on Brad Traversy's paid course on Udemy. Credit at the bottom and links btw.

<sub>Note: The code is based off someone else's ideas, all the comments and doc are mine as this is supposed to be a teaching kind of post, and even though the main concept is not mine, all the code has been tweaked and modified to align with my own ideas.</sub>

## <center>Split main page</center>

For this first project, what I want to achieve is pretty simple: I want to have a front page divided in two, each with a main topic that the user can hover or click on, and that will make that side grow bigger and fit a larger portion of the screen so we can explore it more easily, while the other side will shrink to not steal attention from the user.

### HTML Code

Pretty straightforward code, just setting a couple of classes for each side of the Landing page so I can tweak them later, and just two interactive buttons, one for each side.

I took the liberty of doing it about @ecency and @leofinance, if anyone is against that just let me know and I'll edit the post.

````
  </head>
  <body>
    <div class="container">
      <div class="split left">
        <h1>Ecency</h1>
        <a href="#" class="btn">Join Now</a>
      </div>
      <div class="split right">
        <h1>Leo Finance</h1>
        <a href="#" class="btn">Join Now</a>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>
````
![image.png](https://images.ecency.com/DQmTGFtHB4BqfetmGEbjj3agPTkMJSpCk52DsCfurhPSDj8/image.png)

### CSS Code

````
:root {
  /* --left-bg-color: rgba(87, 84, 236, 0.7);
  --right-bg-color: rgba(43, 43, 43, 0.8); */
  --left-btn-hover-color: rgba(87, 84, 236, 0.7);
  --right-btn-hover-color: rgba(43, 43, 43, 0.8);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 1000ms;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  height: 100vh;
  overflow: hidden;
}

h1 {
  font-size: 4rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-shadow: 4px 4px 4px black;
}

.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  text-decoration: none;
  color: #fff;
  border: #fff solid 0.2rem;
  font-size: 1rem;
  width: 15rem;
  padding: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px black;
  background-color: chocolate;
}

.split.left .btn:hover {
  background-color: var(--left-btn-hover-color);
}

.split.right .btn:hover {
  background-color: var(--right-btn-hover-color);
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #333;
}

.split {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  align-items: center;
}
````
 <center>![image.png](https://images.ecency.com/DQmc3X8ifRH2iu569xixznYLuDGudd68H75L8GvaAhxpZfA/image.png) </center>
````
.split.left {
  left: 0;
  background: url("ecency.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.split.left::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--left-bg-color);
}

.split.right {
  right: 0;
  background: url("leo.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.split.right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--right-bg-color);
}
````
 <center>![gif1.gif](https://images.ecency.com/DQmWHWKSYj58bpTowm2gxFygeMnB9acaJLErDVPcgDjTmXw/gif1.gif) </center>
````
.split.right,
.split.left,
.split.right::before,
.split.left::before {
  transition: all var(--speed) ease-in-out;
}

.hover-left .left {
  width: var(--hover-width);
}

.hover-left .right {
  width: var(--other-width);
}

.hover-right .left {
  width: var(--other-width);
}

.hover-right .right {
  width: var(--hover-width);
}

@media (max-width: 800px) {
  h1 {
    font-size: 2rem;
    transition: 500ms ease-in;
  }

  .btn {
    padding: 1.2rem;
    width: 9rem;
    transition: 500ms ease-in;
  }
}

@media (min-width: 801px) {
  h1 {
    font-size: 4rem;
    transition: 500ms ease-in;
  }

  .btn {
    padding: 1.2rem;
    width: 15rem;
    transition: 500ms ease-in;
  }
}
````

 <center>![gif2.gif](https://images.ecency.com/DQmQ7YTgKk6tmvo4AFCGfjTVEEzqgF4Fm72TCboNdajxwoW/gif2.gif) </center>

### JavaScript Code

````
const left = document.querySelector(".left");
const right = document.querySelector(".right");
const container = document.querySelector(".container");

left.addEventListener("mouseenter", () =>
  container.classList.add("hover-left")
);

left.addEventListener("mouseleave", () =>
  container.classList.remove("hover-left")
);

right.addEventListener("mouseenter", () =>
  container.classList.add("hover-right")
);

right.addEventListener("mouseleave", () =>
  container.classList.remove("hover-right")
);
````
 <center>![gif3.gif](https://images.ecency.com/DQmdXYqLkoxU8XyorVhqX8mpQxn6rJYSp7tiryJqpurQf1Q/gif3.gif) </center>

## <center>Cool Login Module</center>

This second mini project is all about aesthetic. I want to create an original login module that responds to the user's actions and not just a normal container with boxes and type in zones: but a dynamic module that dazzles the average interwebz user.

### HTML Code

````
  </head>
  <body>
    <div class="container">
      <h1>Login with your Hive Username</h1>
      <form>
        <div class="form-control">
          <input type="text" required />
          <label>Username</label>
        </div>

        <div class="form-control">
          <input type="password" required />
          <label>Posting Key</label>
        </div>

        <button class="btn">Login</button>

        <p class="text">
          Do you want to be part of Hive? <a href="#">Register</a>
        </p>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>
````
![image.png](https://images.ecency.com/DQmNkK9vFjpFDiuEXsneX2TnyxSmbP1Kdn1Ey8cRX9ZNHG6/image.png)

### CSS Code

````
body {
  background-color: rgb(209, 80, 80);
  color: #fff;
  font-family: "Muli" sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  border-radius: 5px;
}

.container h1 {
  text-align: center;
  margin-bottom: 30px;
}

.container a {
  text-decoration: none;
  color: crimson;
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: crimson;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
}

.btn:focus {
  outline: 0;
}

.btn:active {
  transform: scale(0.98);
}

.text {
  margin-top: 30px;
}

.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}
````
![image.png](https://images.ecency.com/DQmaq128mMayrKGMXYn9zXYzA91NAWpPgmRniWwCCUnALxR/image.png)

````
.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
}
````
This takes out the ugly border from both the text boxes once we click on them: 
````
.form-control input:focus,
.form-control input:valid {
  outline: 0;
  border-bottom-color: crimson;
}
````
 <center>![gif1.gif](https://images.ecency.com/DQmbNieBpYRqdtaskssmtqtq7Xm3GZrv7xc2FsiAVRZZt15/gif1.gif) </center>
````
.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
}
````
Now that we coded the loop on JS and we have each letter of the forms as individual classes, we can style them .
````
.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* This one takes in 4 speeds, p0-p3. This gives a bouncing effect to the transition */
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: crimson;
  transform: translateY(-30px);
}
````
### JavaScript Code

````
const labels = document.querySelectorAll(".form-control label");

labels.forEach((label) => {
  label.innerHTML = label.innerText
    .split("")
    .map(
      (letter, idx) =>
        `<span style="transition-delay:${idx * 100}ms">${letter}</span>`
    )
    .join("");
});
````
 <center>![gif2.gif](https://images.ecency.com/DQmeDe4pTBmAGS52DEAffcvmQ3MKZY1b9eeZTQGeqrTuACw/gif2.gif) </center>

As you can see these two projects are very basic but doing them helps me develop my skillset and to set to practice all my acquired abilities, they are notmuchbuthonestwork.jpg

I do hope you like them and see the potential this can have for my future Hive projects.

***
***

***
***

<sub>These projects are based on a CSS, HTML and JS paid course I got on Udemy by [Brad Traversy](https://www.udemy.com/course/50-projects-50-days/learn/lecture/23595546#content). I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.</sub>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 121 others
properties (23)
authoranomadsoul
permlinktwo-cool-little-css-and
categoryhive-169321
json_metadata{"links":["https://www.udemy.com/course/50-projects-50-days/learn/lecture/23595546#content"],"image":["https://images.ecency.com/DQmTGFtHB4BqfetmGEbjj3agPTkMJSpCk52DsCfurhPSDj8/image.png","https://images.ecency.com/DQmc3X8ifRH2iu569xixznYLuDGudd68H75L8GvaAhxpZfA/image.png","https://images.ecency.com/DQmWHWKSYj58bpTowm2gxFygeMnB9acaJLErDVPcgDjTmXw/gif1.gif","https://images.ecency.com/DQmQ7YTgKk6tmvo4AFCGfjTVEEzqgF4Fm72TCboNdajxwoW/gif2.gif","https://images.ecency.com/DQmdXYqLkoxU8XyorVhqX8mpQxn6rJYSp7tiryJqpurQf1Q/gif3.gif","https://images.ecency.com/DQmNkK9vFjpFDiuEXsneX2TnyxSmbP1Kdn1Ey8cRX9ZNHG6/image.png","https://images.ecency.com/DQmaq128mMayrKGMXYn9zXYzA91NAWpPgmRniWwCCUnALxR/image.png","https://images.ecency.com/DQmbNieBpYRqdtaskssmtqtq7Xm3GZrv7xc2FsiAVRZZt15/gif1.gif","https://images.ecency.com/DQmeDe4pTBmAGS52DEAffcvmQ3MKZY1b9eeZTQGeqrTuACw/gif2.gif"],"thumbnails":["https://images.ecency.com/DQmTGFtHB4BqfetmGEbjj3agPTkMJSpCk52DsCfurhPSDj8/image.png","https://images.ecency.com/DQmc3X8ifRH2iu569xixznYLuDGudd68H75L8GvaAhxpZfA/image.png","https://images.ecency.com/DQmWHWKSYj58bpTowm2gxFygeMnB9acaJLErDVPcgDjTmXw/gif1.gif","https://images.ecency.com/DQmQ7YTgKk6tmvo4AFCGfjTVEEzqgF4Fm72TCboNdajxwoW/gif2.gif","https://images.ecency.com/DQmdXYqLkoxU8XyorVhqX8mpQxn6rJYSp7tiryJqpurQf1Q/gif3.gif","https://images.ecency.com/DQmNkK9vFjpFDiuEXsneX2TnyxSmbP1Kdn1Ey8cRX9ZNHG6/image.png","https://images.ecency.com/DQmaq128mMayrKGMXYn9zXYzA91NAWpPgmRniWwCCUnALxR/image.png","https://images.ecency.com/DQmbNieBpYRqdtaskssmtqtq7Xm3GZrv7xc2FsiAVRZZt15/gif1.gif","https://images.ecency.com/DQmeDe4pTBmAGS52DEAffcvmQ3MKZY1b9eeZTQGeqrTuACw/gif2.gif"],"users":["ecency","leofinance","media","media"],"tags":["hive-169321","ecency","lefinance","css","javascript","html"],"app":"ecency/3.0.20-vision","format":"markdown+html"}
created2021-12-01 05:35:30
last_update2021-12-01 05:36:45
depth0
children5
last_payout2021-12-08 05:35:30
cashout_time1969-12-31 23:59:59
total_payout_value27.245 HBD
curator_payout_value27.089 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10,181
author_reputation1,681,171,138,068,684
root_title"Two cool little CSS & JS projects"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id108,167,707
net_rshares24,730,519,709,271
author_curate_reward""
vote details (185)
@eroche ·
$0.16
Its all beginning to come together for you. 

It's a shame utopian isn't around anymore. It was great for encouraging these type of tutorial posts.
👍  
properties (23)
authoreroche
permlinkr3fbh8
categoryhive-169321
json_metadata{"app":"hiveblog/0.1"}
created2021-12-01 06:31:57
last_update2021-12-01 06:31:57
depth1
children1
last_payout2021-12-08 06:31:57
cashout_time1969-12-31 23:59:59
total_payout_value0.082 HBD
curator_payout_value0.080 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length147
author_reputation70,759,290,299,941
root_title"Two cool little CSS & JS projects"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id108,168,705
net_rshares74,569,247,965
author_curate_reward""
vote details (1)
@anomadsoul ·
$0.03
Yeah man, I am finally seeing some results, and I still need to grind a lot more but it is nice to see hardwork pay off. Utopian was amazing, I don't remember why it was shut down (maybe it was that it got derailed by curators? Can't remember) but I also think the owner (can't remember the name) got discouraged... 
Would be great to have an Utopian-like project now that Hive is taking a different path.
👍  
properties (23)
authoranomadsoul
permlinkre-eroche-2021128t104447810z
categoryhive-169321
json_metadata{"tags":["ecency"],"app":"ecency/3.0.20-vision","format":"markdown+html"}
created2021-12-08 16:44:48
last_update2021-12-08 16:44:48
depth2
children0
last_payout2021-12-15 16:44:48
cashout_time1969-12-31 23:59:59
total_payout_value0.014 HBD
curator_payout_value0.012 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length405
author_reputation1,681,171,138,068,684
root_title"Two cool little CSS & JS projects"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id108,383,090
net_rshares15,238,561,022
author_curate_reward""
vote details (1)
@sanjeevm ·
$0.17
How about building an app, that could publish content from whatsapp to HIVE blockchain ? Take a real example - I want to have a whatsapp group of my apartment, where people would register the complain and the workers would update on how they work. At the end of the day, it would publish the activities of the day to the blockchain. Just an idea.
👍  
properties (23)
authorsanjeevm
permlinkre-anomadsoul-r3fafa
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2021.09.1"}
created2021-12-01 06:09:12
last_update2021-12-01 06:09:12
depth1
children2
last_payout2021-12-08 06:09:12
cashout_time1969-12-31 23:59:59
total_payout_value0.084 HBD
curator_payout_value0.082 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length346
author_reputation700,498,531,954,267
root_title"Two cool little CSS & JS projects"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id108,168,333
net_rshares76,091,010,664
author_curate_reward""
vote details (1)
@anomadsoul ·
$0.13
This sounds interesting, I'm not sure how to do it (yet) but once I have the skills I might give it a try. The only issue I see is that there are whatsapp groups that are too chatty and the blockchain would be overburdened perhaps? Also the fact that whatsapp is part of the centralized monster that we are fighting against... hahaha.
👍  
properties (23)
authoranomadsoul
permlinkre-sanjeevm-2021128t10430339z
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"ecency/3.0.20-vision","format":"markdown+html"}
created2021-12-08 16:43:00
last_update2021-12-08 16:43:00
depth2
children1
last_payout2021-12-15 16:43:00
cashout_time1969-12-31 23:59:59
total_payout_value0.063 HBD
curator_payout_value0.064 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length334
author_reputation1,681,171,138,068,684
root_title"Two cool little CSS & JS projects"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id108,383,040
net_rshares69,092,335,071
author_curate_reward""
vote details (1)
@sanjeevm · 
> there are whatsapp groups that are too chatty and the blockchain would be overburdened perhaps?

It would just write everything at the end of the day in one thread. Or probably, configuration options to write max 2-3 times in a day. Its not for the regular chat though, so I would expect, it would be having focused content.
properties (22)
authorsanjeevm
permlinkre-anomadsoul-r3tz55
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2021.09.1"}
created2021-12-09 04:29:30
last_update2021-12-09 04:29:30
depth3
children0
last_payout2021-12-16 04:29:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length327
author_reputation700,498,531,954,267
root_title"Two cool little CSS & JS projects"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id108,396,614
net_rshares0
Help/Feedback