How to Random Quote Generator using JavaScript & CSS

Javascript Random Quote Generator will basically help you to create a random quote using an API link. You can easily create this kind of simple Quote Generator if you know the basics of HTML, CSS, and javascript.

In this tutorial, I have shown how to create Random Quote Generator using JavaScript. Quote Generator can be made in two ways. In the first case, you will collect all the information from any other third-party source using an API link. Then you can show it in the place of your choice.

You can also manually add all the quota information here. Here I have used the API link. To make this Quote Generator Javascript you must have a basic idea about HTML, CSS, and JavaScript.

Javascript Random Quote Generator

Below I have given a demo that will help you to know how this Random Quote Generator HTML works. If you only want the source code, you can use the download button below the article.

First I created a heading on a webpage with a blue background. Then I made a box with a display. Quote, and author’s name can be seen in that display. In the end, there is a button that will generate a different quote every time you click on it.

As I said before, all these quotes are not added manually. It has been collected and brought to other websites using API links.

First I added all the information using HTML and CSS and did the design work. Then I implemented Random Quote Generator using JavaScript.

How to Make a Random Quote Generator Javascript

Here I have used API links on a website. If you want you can use the API link on the website of your choice. There are many websites on the internet that provide such API links.

Below I have shared the complete step-by-step tutorial on how to create Javascript Random Quote Generator. I have shown the possible result of each step with a picture. Which will help you understand what kind of changes may occur after using any code.

Step 1: Design the webpage

I have created the basic structure of this Random Quote Generator using the following codes. Here the background color of the webpage is blue.

<div class=”wrapper”>
</div>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
body {
 background-color: #aed7eb;
}
.wrapper {
 width: 400px;
 position: absolute;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
}

Step 2: Add a heading

Now I have created a heading which is basically to enhance the beauty. The h2 tag of HTML has been used for its heading. I used white color and text color blue in the background of the title.

<h2>Random Quote Generator</h2>
.wrapper h2{
  text-align: center;
  margin: 0px 30px 50px 0px;
  background: white;
  padding: 10px;
  width: 100%;
  color: rgb(3, 64, 153);
}

Step 3: Basic structure of Quote Generator

Now I have created a box in which this quote can be found. The background color of this box is white and shadows have been used all around to enhance the beauty.

<div class=”container”>
</div>
.container {
width: 100%;
background-color: #ffffff;
padding: 50px 30px;
box-shadow: 0 20px 65px rgba(87, 11, 16, 0.3);
position: relative;
border-radius: 5px;
text-align: center;
}

Step 4: Create a Quote View Display

Now a display has been created in which the text of the quote and the name of the author can be seen.

<div class=”display”>
  <p id=”quote”>
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,
      magni.
  </p>
  <h3 id=”author”>Lorem, ipsum.</h3>
</div>

The display has been designed using the following codes. I used a box shadow around the display and used a border.

.display{
 box-shadow: 0 0 20px rgba(0,139,253,0.25);
 padding: 10px;
 border: 1px solid rgba(9, 82, 158, 0.29);
}

I have designed the text of the quote and the name of the author using the following codes. I have already added a hyphen (‘-‘) to the author’s name before using it.

.container p {
 color: #142350;
 line-height: 2;
 font-size: 19px;
}
.container h3 {
 color: #570c9d;
 margin: 35px 0 10px 35%;
 font-weight: 600;
 text-transform: capitalize;
}
.container h3::before{
 content: “- “;
 color: rgb(12, 94, 210);
}

Step 5: Create a Quote Generate button

Now the generate button has been created which will generate a different quote every time you click on it.

I created that button using the button function of HTML. Button’s background is used in Garo blue color and text color white.

<button id=”btn”>Get Quote</button>
.container button {
 background-color: #17203d;
 border: none;
 padding: 15px 45px;
 border-radius: 5px;
 margin-top: 40px;
 font-size: 18px;
 font-weight: 600;
 color: #ffffff;
 cursor: pointer;
}

Step 6: Activate Random Quote Generator with JavaScript

The above HTML has created the basic structure of Javascript Random Quote Generator using CSS. However, it is not yet effective.

For this, you need to use the following JavaScript. Here we have used very simple JavaScript code which you can easily understand.

First, the global constants of some HTML elements are determined. Because we cannot use any HTML element directly in JavaScript. Here is the global constant of the generator button, author name, and quote IDs.

let quote = document.getElementById(“quote”);
let author = document.getElementById(“author”);
let btn = document.getElementById(“btn”);

Now I have stored an API link in a constant called ‘url’. All information will be fetched using this link. If you wish you can use any other link instead of this link.

const url = “https://api.quotable.io/random”;

Now all the information containing the API link has been fetched using the following code. All of these calculations have been assigned a constant called ‘getQuote’.

Here the information of quote and author has been collected and it has been arranged to display it in the webpage with the help of ‘innerText’.

let getQuote = () => {
  fetch(url)
    .then((data) => data.json())
    .then((item) => {
       quote.innerText = item.content;
       author.innerText = item.author;
    });
};

When you load the window, ie open this Random Quote Generator HTML for the first time, an automatic quote will be generated automatically.

For which the following code line has been used. Here are the instructions, when you load this page, the above calculations (getQuote) will be effective and new quotes will be available.

window.addEventListener(“load”, getQuote);

Now I have activated the generate button. The above calculations will work when you click on that button. As a result, another quote can be generated.

btn.addEventListener(“click”, getQuote);

Random Quote Generator HTML Code

Above I have shared step-by-step tutorials of this Random Quote Generator Javascript. However, there are many beginners who will not be able to use all those codes together in their work.

All you have to do is create an HTML file and add these codes. If you have difficulty copying these codes, use the download button below.

Hopefully the above code and tutorial have helped you to create this Random Quote Generator HTML CSS. I have created many more such projects before, notably random password generator, random joke generator, etc.

If you have any questions about this JavaScript Quote Generator then you can definitely let me know by commenting.

Original article source at: https://foolishdeveloper.com/

#javascript #css #random

What is GEEK

Buddha Community

How to Random Quote Generator using JavaScript & CSS

Chloe Butler

1667425440

Pdf2gerb: Perl Script Converts PDF Files to Gerber format

pdf2gerb

Perl script converts PDF files to Gerber format

Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.

The general workflow is as follows:

Design the PCB using your favorite CAD or drawing software.
Print the top and bottom copper and top silk screen layers to a PDF file.
Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
Use a Gerber viewer to double-check the output against the original PCB design.
Make adjustments as needed.
Submit the files to a PCB manufacturer.

Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).

See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.

pdf2gerb_cfg.pm

#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;

use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)


##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file

use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call

#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software.  \nGerber files MAY CONTAIN ERRORS.  Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG

use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC

use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)

#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1); 

#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
    .010, -.001,  #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
    .031, -.014,  #used for vias
    .041, -.020,  #smallest non-filled plated hole
    .051, -.025,
    .056, -.029,  #useful for IC pins
    .070, -.033,
    .075, -.040,  #heavier leads
#    .090, -.043,  #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
    .100, -.046,
    .115, -.052,
    .130, -.061,
    .140, -.067,
    .150, -.079,
    .175, -.088,
    .190, -.093,
    .200, -.100,
    .220, -.110,
    .160, -.125,  #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
    .090, -.040,  #want a .090 pad option, but use dummy hole size
    .065, -.040, #.065 x .065 rect pad
    .035, -.040, #.035 x .065 rect pad
#traces:
    .001,  #too thin for real traces; use only for board outlines
    .006,  #minimum real trace width; mainly used for text
    .008,  #mainly used for mid-sized text, not traces
    .010,  #minimum recommended trace width for low-current signals
    .012,
    .015,  #moderate low-voltage current
    .020,  #heavier trace for power, ground (even if a lighter one is adequate)
    .025,
    .030,  #heavy-current traces; be careful with these ones!
    .040,
    .050,
    .060,
    .080,
    .100,
    .120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);

#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size:   parsed PDF diameter:      error:
#  .014                .016                +.002
#  .020                .02267              +.00267
#  .025                .026                +.001
#  .029                .03167              +.00267
#  .033                .036                +.003
#  .040                .04267              +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
    HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
    RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
    SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
    RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
    TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
    REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};

#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
    CIRCLE_ADJUST_MINX => 0,
    CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
    CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
    CIRCLE_ADJUST_MAXY => 0,
    SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
    WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
    RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};

#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches

#line join/cap styles:
use constant
{
    CAP_NONE => 0, #butt (none); line is exact length
    CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
    CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
    CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
    
#number of elements in each shape type:
use constant
{
    RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
    LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
    CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
    CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
    rect => RECT_SHAPELEN,
    line => LINE_SHAPELEN,
    curve => CURVE_SHAPELEN,
    circle => CIRCLE_SHAPELEN,
);

#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions

# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?

#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes. 
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes

#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches

# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)

# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time

# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const

use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool

my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time

print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load


#############################################################################################
#junk/experiment:

#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html

#my $caller = "pdf2gerb::";

#sub cfg
#{
#    my $proto = shift;
#    my $class = ref($proto) || $proto;
#    my $settings =
#    {
#        $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
#    };
#    bless($settings, $class);
#    return $settings;
#}

#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;

#print STDERR "read cfg file\n";

#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names

#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }

Download Details:

Author: swannman
Source Code: https://github.com/swannman/pdf2gerb

License: GPL-3.0 license

#perl

anita maity

1619614811

Random Password Generator Using JavaScript, HTML & CSS

Random Password Generator is a program that automatically generates a password randomly. Those generated passwords are mix with numbers, alphabets, symbols, and punctuations. This type of program helps the user to create a strong password.

Step By Step Tutorial :https://cutt.ly/ZbiDeyL

#password generator #random password generator #python password generator #random password generator javascript #html #javascript

Shannon Atkinson

1651544441

How to Create a Testimonial Slider Using HTML, CSS and Bootstrap

How To Make Testimonial Slider Using HTML CSS JavaScript

In this video, we will learn how to create a Testimonial Slider Using HTML CSS & Bootstrap. For the testimonial carousel, we will use an owl carousel slider. Hope you will like it.

Learn how to create responsive testimonials with CSS.

How To Style Testimonials

Step 1) Add HTML:

Example

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
  <p>John Doe saved us from a web disaster.</p>
</div>

<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span >Rebecca Flex.</span> CEO at Company.</p>
  <p>No one is better than John Doe.</p>
</div>

Step 2) Add CSS:

Example

/* Style the container with a rounded border, grey background and some padding and margin */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
  content: "";
  clear: both;
  display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Increase the font-size of a span element */
.container span {
  font-size: 20px;
  margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }

  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

What is Bootstrap Testimonial Slider and how to design it?

Learn about how to create a bootstrap testimonial slider using HTML, and styling it using CSS.

Let’s begin.

Understanding using HTML Code

<div class = "container">
        <div class = "row">
            <div class = "col-md-12">
                <div class = "carousel slide" data-ride = "carousel" id = "quote-carousel">
 
                    <!-- Carousel Slides / Quotes -->
                    <div class = "carousel-inner text-center">
 
                        <!-- Quote 1 -->
                        <div class = "item active">
                            <blockquote>
                                <div class = "row">
                                    <div class = "col-sm-8 col-sm-offset-2">
                                        <p> Edureka has the best online courses! </p>
                                        <small> Reviewer's Name </small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 2 -->
                        <div class = "item">
                            <blockquote>
                                <div class = "row">
                                    <div class = "col-sm-8 col-sm-offset-2">
                                        <p> Edureka has the best online courses!  </p>
                                        <small> Reviewer's Name </small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 3 -->
                        <div class = "item">
                            <blockquote>
                                <div class = "row">
                                    <div class = "col-sm-8 col-sm-offset-2">
                                        <p> Edureka has the best online courses! </p>
                                        <small> Someone famous </small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                    </div>
                    <!-- Bottom Carousel Indicators -->
                    <ol class = "carousel-indicators">
                        <li data-target = "#quote-carousel" data-slide-to = "0" class = "active"> <img class = "img-responsive " src = "<a href="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg">https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg</a>" alt="">
                        </li>
                        <li data-target = "#quote-carousel" data-slide-to= "1"> <img class = "img-responsive" src = "<a href="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg">https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg</a>" alt = "">
                        </li>
                        <li data-target = "#quote-carousel" data-slide-to = "2"><img class = "img-responsive" src = "<a href="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg">https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg</a>" alt="">
                        </li>
                    </ol>
 
                    <!-- Carousel Buttons Next/Prev -->
                    <a data-slide = "prev" href = "#quote-carousel" class = "left carousel-control"><i class = "fa fa-chevron-left"> </i> </a>
                    <a data-slide = "next" href = "#quote-carousel" class = "right carousel-control"><i class = "fa fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
        <a class = "btn btn-primary" href = "<a href="http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel">http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel</a>"><i class = "fa fa-arrow-left"></i> Back to Article</a>
    </div>

Explanation:

The “.carousel slide” class is used to create a carousel slider. To create a text in the center, the “.caraouse-inner text-center” class is used. Next, <blockquote> is used to specify the section that is quoted. Here, it is used to quote the clients’ testimonials. The client’s testimonial is then entered. This is repeated until you have added enough number of testimonials.

Understanding CSS

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
    width: 128px;
    height: 128px;
    opacity: 1;
    transition: all .2s;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}

Explanation

Each division of the HTML code can be customized according to your needs. Simply creation a section and copy-paste the above code and edit it to your requirements.

The final output of your code would look like:

Output- Boostrap Testimonial - Edureka

#html #css #bootstrap #javascript

Barney Baumbach

1677512580

How to Random Quote Generator using JavaScript & CSS

You can also manually add all the quota information here. Here I have used the API link. To make this Quote Generator Javascript you must have a basic idea about HTML, CSS, and JavaScript.

Javascript Random Quote Generator

Below I have given a demo that will help you to know how this Random Quote Generator HTML works. If you only want the source code, you can use the download button below the article.

As I said before, all these quotes are not added manually. It has been collected and brought to other websites using API links.

First I added all the information using HTML and CSS and did the design work. Then I implemented Random Quote Generator using JavaScript.

How to Make a Random Quote Generator Javascript

Here I have used API links on a website. If you want you can use the API link on the website of your choice. There are many websites on the internet that provide such API links.

Step 1: Design the webpage

I have created the basic structure of this Random Quote Generator using the following codes. Here the background color of the webpage is blue.

<div class=”wrapper”>
</div>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
body {
 background-color: #aed7eb;
}
.wrapper {
 width: 400px;
 position: absolute;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
}

Step 2: Add a heading

Now I have created a heading which is basically to enhance the beauty. The h2 tag of HTML has been used for its heading. I used white color and text color blue in the background of the title.

<h2>Random Quote Generator</h2>
.wrapper h2{
  text-align: center;
  margin: 0px 30px 50px 0px;
  background: white;
  padding: 10px;
  width: 100%;
  color: rgb(3, 64, 153);
}

Step 3: Basic structure of Quote Generator

Now I have created a box in which this quote can be found. The background color of this box is white and shadows have been used all around to enhance the beauty.

<div class=”container”>
</div>
.container {
width: 100%;
background-color: #ffffff;
padding: 50px 30px;
box-shadow: 0 20px 65px rgba(87, 11, 16, 0.3);
position: relative;
border-radius: 5px;
text-align: center;
}

Step 4: Create a Quote View Display

Now a display has been created in which the text of the quote and the name of the author can be seen.

<div class=”display”>
  <p id=”quote”>
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,
      magni.
  </p>
  <h3 id=”author”>Lorem, ipsum.</h3>
</div>

The display has been designed using the following codes. I used a box shadow around the display and used a border.

.display{
 box-shadow: 0 0 20px rgba(0,139,253,0.25);
 padding: 10px;
 border: 1px solid rgba(9, 82, 158, 0.29);
}

I have designed the text of the quote and the name of the author using the following codes. I have already added a hyphen (‘-‘) to the author’s name before using it.

.container p {
 color: #142350;
 line-height: 2;
 font-size: 19px;
}
.container h3 {
 color: #570c9d;
 margin: 35px 0 10px 35%;
 font-weight: 600;
 text-transform: capitalize;
}
.container h3::before{
 content: “- “;
 color: rgb(12, 94, 210);
}

Step 5: Create a Quote Generate button

Now the generate button has been created which will generate a different quote every time you click on it.

I created that button using the button function of HTML. Button’s background is used in Garo blue color and text color white.

<button id=”btn”>Get Quote</button>
.container button {
 background-color: #17203d;
 border: none;
 padding: 15px 45px;
 border-radius: 5px;
 margin-top: 40px;
 font-size: 18px;
 font-weight: 600;
 color: #ffffff;
 cursor: pointer;
}

Step 6: Activate Random Quote Generator with JavaScript

The above HTML has created the basic structure of Javascript Random Quote Generator using CSS. However, it is not yet effective.

For this, you need to use the following JavaScript. Here we have used very simple JavaScript code which you can easily understand.

let quote = document.getElementById(“quote”);
let author = document.getElementById(“author”);
let btn = document.getElementById(“btn”);

Now I have stored an API link in a constant called ‘url’. All information will be fetched using this link. If you wish you can use any other link instead of this link.

const url = “https://api.quotable.io/random”;

Now all the information containing the API link has been fetched using the following code. All of these calculations have been assigned a constant called ‘getQuote’.

Here the information of quote and author has been collected and it has been arranged to display it in the webpage with the help of ‘innerText’.

let getQuote = () => {
  fetch(url)
    .then((data) => data.json())
    .then((item) => {
       quote.innerText = item.content;
       author.innerText = item.author;
    });
};

When you load the window, ie open this Random Quote Generator HTML for the first time, an automatic quote will be generated automatically.

For which the following code line has been used. Here are the instructions, when you load this page, the above calculations (getQuote) will be effective and new quotes will be available.

window.addEventListener(“load”, getQuote);

Now I have activated the generate button. The above calculations will work when you click on that button. As a result, another quote can be generated.

btn.addEventListener(“click”, getQuote);

Random Quote Generator HTML Code

Above I have shared step-by-step tutorials of this Random Quote Generator Javascript. However, there are many beginners who will not be able to use all those codes together in their work.

All you have to do is create an HTML file and add these codes. If you have difficulty copying these codes, use the download button below.

If you have any questions about this JavaScript Quote Generator then you can definitely let me know by commenting.

Original article source at: https://foolishdeveloper.com/

#javascript #css #random

Nicholas Witting

1676931900

How to Create A Random Color Generator with JavaScript & CSS

In this article, you will learn how to create a random color generator using JavaScript and CSS. This is a basic JavaScript project that can generate random colors with a single click. The color code of that color can be seen in front. Which you can copy and use in your work.

To build this type of JavaScript random color generator you need to have knowledge of HTML CSS and JavaScript. There is a generate button here. When you click on that button, the color code will be copied.

JavaScript Random Color Generator (Live Demo)

Below I have given a live demo of it which will help you to know how this project (Random Color Generator with JavaScript) works. Here you will find the required source code.

As you can see above, this is a very nice and simple project. First I designed the webpage. Then I made a box here. I first gave a heading in that box. Then there is a display where random color can be seen to be generated. Then there is a small box where the color code can be found.

I have created two buttons at the end of all. To generate one color and copy another color. Each time you click on the Generate button, there will be a different color general at random. If you want to copy that color code, the copy button will help.

How To Generate a Random Color in JavaScript

Now I have shared the complete tutorial on how to create this project (Random color generator in JavaScript). If you know the basics of JavaScript, you can easily build it.

Here you have complete step-by-step tutorials that will help you know which code works. First, you create an HTML and CSS file.

Step 1: Basic structure of Color Generator

I have created the basic structure of this color generator using the following HTML and CSS code. A small box has been created on the page where all the information will be added. The background color of the box is white.

<div class=”container”>
 
</div>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: sans-serif;
}
body{
    background-color: #0574c8;
}
.container{
    background-color: white;
    width: 60vmin;
    padding: 2.5em 1.1em;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 3vmin;
    border-radius: 10px;
}

Step 2: Add a heading using HTML

Now I have added a heading in this box using the following codes. It basically enhances the beauty. For this, I have used the h1 tag of HTML and designed it with the help of CSS.

<h1>Color Generator</h1>
.container h1{
  font-size: 27px;
  text-align: center;
  margin-top: -20px;
  color: #09599a;
  margin-bottom: 20px;
}

Step 3: Create a display for color viewing

Now HTML and CSS code have helped to create the display. The display is basically for viewing by generating colors. Whenever you click on the generator button, you can see the color in this display. Its width is 100% and height is 30vmin. Box-shadow has been used to enhance beauty.

 <div id=”output-color”>
    <span></span>
 </div>
#output-color{
    position: relative;
    height: 30vmin;
    width: 100%;
     box-shadow: 0 0 20px rgba(0,139,253,0.25);
    border: 2px solid #ffffff;
    margin: auto;
    display: grid;
    margin-bottom: 15px;
    place-items: center;
}
#output-color span{
    display: block;
    width: 100%;
    height: 100%;
}

I have added a kind of animation using the below CSS. There will be a kind of animation whenever this color can be seen in the display.

.show-color{
    animation: pop 0.8s;
}
@keyframes pop{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}

Step 4: Create a box to view the color code

Now I have created a small box where the code of this generated color can be seen.

 <input type=”text” id=”output” readonly>
input[type=”text”]{
    width: 100%;
    background-color: transparent;
    box-shadow: 0 0 20px rgba(0,139,253,0.65);
    font-size: 1.3em;
    padding: 0.3em 0;
    margin: 1em 0;
    border-radius: 5px;
    color: #000000;
    text-align: center;
}
input[type=”text”]::-moz-selection{
    background: transparent;
}
input[type=”text”]::selection{
    background: transparent;
}

Step 5: Create a generator and copy button

Now I have created two buttons to generate the color and to copy the color. The width of the button is 120px and the height depends on the padding.

 <div class=”btns”>
     <button id=”gen-btn”>Generate</button>
     <button id=”copy-btn”>Copy</button>
 </div>
.btns{
    display: flex;
    margin-top: 15px;
    justify-content: space-around;
}
.btns button{
    font-size: 1.03em;
    padding: 0.8em 1.7em;
    border-radius: 7px;
    width: 120px;
    font-weight: 600;
    cursor: pointer;
}

Now the following CSS codes have helped to add different background colors for the two buttons. The first button has added blue color to the case. I have added red color in the second case. You can change the background color to your liking.

#gen-btn{
    background-color: #205e94;
    color: #ffffff;
}
#copy-btn{
    background-color: #d23332;
    color: #ffffff;
}

Step 6: Activate Random Color Generator with JavaScript

Above we have designed the basics of this project (Build a Random Color Generator with JavaScript). Now is the time to implement it with JavaScript. I tried to explain the whole code.

First I set the color display, the color code, and the ID function of the two buttons one by one.

let outputColor = document.querySelector(“#output-color span”);
let output = document.getElementById(“output”);
let genBtn = document.getElementById(“gen-btn”);
let copyBtn = document.getElementById(“copy-btn”);

Now I have used HexString. It is a binary value that combines with each other to form colors.
Now I have added all the color characters together. Later I will create beautiful colors by randomly adding using JavaScript.

let hexString = “0123456789abcdef”;

Now I have done the work of generating color. Math Random helped to create random colors. This is very simple JavaScript. If you know basic JavaScript you can easily understand it.

let genHexCode = () => {
    let hexCode = “#”;
    for( i = 0; i < 6; i++){
        hexCode += hexString[Math.floor(Math.random() * hexString.length)];
    }
    output.value = hexCode;
    outputColor.classList.remove(“show-color”);
    setTimeout( () => {
        outputColor.classList.add(“show-color”);
    },10);
    outputColor.style.backgroundColor = hexCode;
}

Now I have activated the copy button. This button will help you to copy the color code that will be created above.

copyBtn.addEventListener(“click”, () => {
    output.select();
    document.execCommand(“copy”);
})

Now I have activated the generate button. I have created a system to generate a color. Now I have been instructed to implement that genHexCode system. That system will work whenever you click on the Generate button. This will create color and can be seen in the display.

window.onload = genHexCode;
genBtn.addEventListener(“click”, genHexCode);

Hope you learned from this tutorial how I created this random color generator using HTML CSS and JavaScript. Earlier I made a random gradient color generator. The required source code is in the download button below.

Original article source at: https://foolishdeveloper.com/

#random #generator #javascript #css