Can JavaScript be utilized to randomly generate a predetermined link color and hover color each time the page is refreshed?

I have never ventured into the world of javascript before, but I am curious to find out if it is feasible to achieve what I have in mind before investing time in learning the language.

After spending a few days browsing forums and experimenting with code from a demo site, I have been trying to understand how changing certain properties can impact an entire section.

In my CSS, I have defined 'a:link', 'a:active', and 'a:visited' as one set color, while the 'a:hover' is set as its complementary color (#128EED = color, #ED7112 = complementary).

My goal is to have one of 8 predetermined colors randomly selected when any page loads, with the complementary color of the chosen random color becoming the 'a:hover' color.

Any guidance or insights on this matter would be highly appreciated as I consider taking on this challenge.

Thank you and warm regards.

javascriptcsscolorshover

Answer №1

Absolutely, you have the ability to achieve that task. By using javascript, you can customize the style of an element by creating multiple classes for different styling options and applying them as needed. There are various solutions available to tackle your issue, making it quite achievable.

Furthermore, dedicating time to mastering javascript is a valuable investment, especially in the realm of web programming. It not only reduces the need for constant server communication but also extends the functionality beyond what HTML alone can offer. Learning javascript is always beneficial in enhancing web development skills.

Answer №2

Update: Please note that setting specific style attributes, such as hover effects, may not be achievable directly. However, there are alternative methods available, which have been shared in a linked comment below this response. My apologies for any confusion caused.

Absolutely! You can definitely do it. Simply utilize the following code snippet, assuming you have an array named ColorArray containing arrays of complementary colors:

I'm not entirely certain about the accuracy of the words following .style, but they should be fairly easy to research. I've broken it down into 5 lines for clarity, although there might be a more concise way to convey the information.

// select a random pair of complementary colors
var pair = ColorArray[Math.floor(Math.random() * CollorArray.length)];

// access elements and set style attributes
document.getElementsByTagName("tag").style.link = pair[0]
document.getElementsByTagName("tag").style.active = pair[0]
document.getElementsByTagName("tag").style.visited = pair[0]

// Now assign your complementary color for hover effect:
document.getElementsByTagName("tag").style.hover = pair[1]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to making a basic cross-domain ajax request that fetches an HTML webpage

I have been researching various methods for making cross domain calls using ajax, but they all seem overly complex or too specific. Below is a basic HTML page where I am trying to send request parameters to a specific JSP on my server. <!DOCTYPE html&g ...

javascriptjqueryhtmlajaxjsp

Surrounding a parent div with an additional div element

I'm struggling to summarize my predicament, but let me share some simplified code that highlights the issue (index.html): <html> <body> <div id="wrapper" class="divide"> <div id="top" class="divide"> ...

htmlcss

Observing for form input in Nuxt.js

There is a form on my webpage, which includes the following elements: <div v-if="this.userdata.address == ''">Please enter your address</div> Your address <input type="text" v-model="userdata.address" ...

javascriptvue.jsnuxt.js

Verify if an array contains a specific string while disregarding any additional letters within that string

Let's say I have a variable: var url = "/login/user"; Along with an array: var x = ["login", "resetpassword", "authenticate"]; My goal is to check if the url string exists within the array. The issue arises because the url contains additional char ...

javascriptarraysangularstring

Unable to add the BR element

After grabbing data from a textarea where each value is separated by a comma, I am transforming it into an array and adding each element to a div with the class name chars. Specifically, I want to ensure that only 5 children are appended per row within thi ...

javascripthtmlcssarraysflexbox

Difficulty arises when trying to add various text fields to a collection

Lately, I've been making modifications to the Meteor1.3+React Todos app to familiarize myself with the basics, and I must say, it's been a smooth ride so far. However, I have encountered a roadblock. I want to incorporate an additional text field ...

javascriptmongodbmeteorreactjs

Retrieve data from an online JSON file

I am still learning about working with json and would appreciate some guidance. The data file I need to access is located at this url - I would like to display it in the following format: <ul id="smenu"> <li></li> </ul> Cou ...

javascriptjqueryhtmlcssjson

Tips for structuring JavaScript code within ASP.NET MVC projects

We're looking to enhance the functionality of a view page with some Ajax functions. This means that when a user clicks on a delete or insert button, an Action will be triggered to carry out a CRUD operation in the background, followed by refreshing th ...

javascriptajaxasp.net-mvc-3

Tips for verifying the HTML5 date format

I am looking to implement the HTML5 date input field <input type='date' name='customDate'> This will allow other users to utilize the built-in datepicker available in their browser. One challenge I have encountered is ensuring ...

javascriptphpjqueryhtmldate

What is the technique to shift the blocks to the adjoining column?

https://i.sstatic.net/6jeHV.png Will these elements flow into the adjacent column as I continue adding more of them? GS0 represents the background and block is a class defining the block. .GS0{ min-height: 90vh; display: flex; justify-content: ...

htmlcssreactjs

What is the best way to center buttons beneath a navbar that has been expanded for small screens using navbar-expand

Here is a picture of my current situation. I am struggling with placing items using bootstrap flexibly, specifically trying to center all the buttons using justify-content: center. However, it seems that the default setting in navbar-expand-sm is justify ...

htmlcsstwitter-bootstrap

Using Laravel 8 to create connected dropdown menus with the power of Ajax

Struggling with setting up a dependent dropdown menu in Laravel 8 using Ajax. The first dropdown works fine, but the next two don't display any options. Being new to Laravel, I'm having trouble pinpointing the problem areas. Seeking assistance to ...

javascriptjqueryajaxlaravel

establish a time limit for the initial run

Every hour, I use this script to fetch new content for a webpage. (function worker() { $.ajax({ url: 'ajax/test.html', success: function(data) { $('.result').htm ...

javascriptjquery

Ajax is unintentionally duplicating the request

When the "async" parameter is set to "true", ajax sends two requests at the same time. But, when it is set to "false", there are no issues. To prevent the page from reloading, I am using the following code: $(document).ready(function() { $(document).on(& ...

javascriptjqueryajax

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

javascripthtmljquerycssvideo

Activate flashlight on web application using JavaScript and HTML through phone's browser

I need help figuring out how to activate a phone's flashlight within a web app using JavaScript and HTML. I successfully developed a web app that scans QR codes using the phone's camera. While I managed to activate the camera, I encountered chall ...

javascriptphphtmlcssweb-applications

Repetitive importing of identical dependencies or services

I'm facing a problem with node, and I suspect it might be impacting the speed of my application. My main query is about the correct way to utilize the same services/dependencies in multiple areas of my application. For Instance // db.js File Contai ...

javascriptnode.jsweb-servicesnpm

Adjust the text color to complement the shifting background shade

I'm looking to customize the hover color of my links to match the constantly changing background. You can view my progress on this in the JSFiddle linked below: https://jsfiddle.net/Lcz7gk72/ Essentially, I want the "[email protected]" text to b ...

javascripthtmlcss

How to create nested form arrays with Angular that function autonomously

Attempting to find a solution for the issue where both fields in my form array change when the field type is altered. https://i.sstatic.net/8hWpw.gif As depicted in the image. Choosing "first name" in the left field causes the right field to switch to a ...

javascriptangular

Arrange the TypeScript array in alphabetical order first, followed by numbers, utilizing the Intl.Compare method

I need to sort an array of objects by their values. Provided Input let arr = ['4-5', 'null-4', '7-null', '1-2'] Desired Output ['null-4', '1-2', '4-5','7-null'] I attempted ...

javascripttypescript