Creating a custom color scheme for school events

Question

Creating a custom color scheme for school events

I am currently studying coding in school and have just started my coding journey 3 months ago. This is my first post on a forum, so please be kind!

I am encountering an issue with the drag function.

For an extracurricular activity for school kids, I came up with the idea of creating a color synthesis project using a computer. My goal is to create a circle with a drag function and a square border around the circle for resizing purposes.

My main focus is on the JavaScript function rather than CSS. The opacity feature creates an additive color system for the color synthesis.

// JavaScript code for drag and resize functions...

// CSS styling for the webpage...

<nav class="nav">
  <a class="logo" href="#">Musiexplo</a>
  <div class="nav-buttons">
      <a class="nav-button" href="#">Connect</a>
      <a class="nav-button" href="index.html">New Search</a>
  </div>
</nav>
<body>
  <contain class="homesearch">
  <section class="sectionA row-col">
  <div class="container">
    <div class="square"></div>
    <div class="circle"></div>
  </div>

  <div class="container" >
    <div class="square"></div>
    <div class="circle" style="background-color: red;"></div>
  </div>
</section>
<section class="sectionB row">
  <form action="" method="post">
    <label for="style1"  ></label>
    <input type="text" type="subimt">
    <button class="btn btn-primary mt-3" type="submit">Style1</button>
    
    <label for="style2"  ></label>
    <input type="text" type="subimt">
    <button class="btn btn-primary mt-3" type="submit">Style2</button>
  </form>
</section>
</contain>

javascript html css

Answer 1

Answer №1

Your code is impressively clean, especially for someone new to coding. Great work!

One minor issue:

<input type="text" type="subimt">

is not valid because an input cannot have two types. Typically, it should be type="text" if you want users to be able to type in it. But I understand that this isn't the main focus of your question.

Below is the code with some additions, specifically console.log statements for each event function so you can track when they're being called. It seems that some functions are not executing properly, which might be causing your problem.

 // Your JavaScript code goes here

 /* Your CSS code goes here */

 <!-- Your HTML code goes here -->

I suspect the issue is related to how you're handling event listeners - adding and removing them multiple times. You should consider simplifying your approach by following these steps:

Attach all document event listeners just once outside of a function call
Avoid removing listeners; instead, use boolean flags inside them to control their behavior (which you're already doing to some extent)
Add event listeners to elements like circle only once, without removing them afterwards

Constantly adding and removing listeners adds unnecessary complexity. By making these adjustments, you'll streamline your code and improve its clarity.

Answer 2

Your code is impressively clean, especially for someone new to coding. Great work!

One minor issue:

<input type="text" type="subimt">

is not valid because an input cannot have two types. Typically, it should be type="text" if you want users to be able to type in it. But I understand that this isn't the main focus of your question.

Below is the code with some additions, specifically console.log statements for each event function so you can track when they're being called. It seems that some functions are not executing properly, which might be causing your problem.

 // Your JavaScript code goes here

 /* Your CSS code goes here */

 <!-- Your HTML code goes here -->

I suspect the issue is related to how you're handling event listeners - adding and removing them multiple times. You should consider simplifying your approach by following these steps:

Attach all document event listeners just once outside of a function call
Avoid removing listeners; instead, use boolean flags inside them to control their behavior (which you're already doing to some extent)
Add event listeners to elements like circle only once, without removing them afterwards

Constantly adding and removing listeners adds unnecessary complexity. By making these adjustments, you'll streamline your code and improve its clarity.

Creating a custom color scheme for school events

Answer №1

Similar questions

Maintaining uniformity in Python by assigning and populating empty values for any missing HTML tags to ensure consistency across structures

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Can JavaScript be executed from the console while navigating between pages?

An error with code -4058 occurred when I tried to execute the command npm run start-rewired

What is the best way to ensure synchronous function execution in Angular?

Refreshing page with ReactJS internationalization (i18n) capabilities

What are the possibilities of utilizing both Bootstrap 5 grid and Bootstrap 4 grid interchangeably?

Reposition the div element on mobile devices using media queries

Efficiently Embedding Images into Canvas Elements

An unusual visual anomaly (a small line appears) when hovering over a button in the web browser

Generate HTML on the fly using Node variables

What is the reason for Bootstrap requiring both a class name and an ID name for collapse functionality?

Checking if the Cursor is Currently Positioned on a Chart Element in Word Addin/OfficeJS

How can I convert a string containing integers into an int[] using javascript or jQuery?

Attempt to generate a function in JavaScript that mirrors an existing one

Creating a function in React to be passed as a prop

Retrieving content dynamically using ajax

Issues encountered with JavaScript when trying to use the jQuery API

Preserve the hidden div selection stored in an array even after the page is refreshed

Exporting Typescript to Javascript files