Skip to content
Snippets Groups Projects
Commit 1bd1f31b authored by Phillip Phan's avatar Phillip Phan
Browse files

Create Set Palette

parent f6027ed0
No related branches found
No related tags found
No related merge requests found
.DS_Store 0 → 100644
File added
File added
@page
@model CI_ColorWebs.Pages.TruePaletteModel
@{
ViewData["Title"] = "True Palette";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
<h2>
<button id="gsetNew">Generate New Set Palette</button>
<span id="palColor"></span>
<span id="palColor2"></span>
<span id="palColor3"></span>
<span id="palColor4"></span>
<span id="palColor5"></span>
<span id="palColor6"></span>
<canvas width = "700"></canvas>
</h2>
</div>
<script src = './js/truepalette.js'></script>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace CI_ColorWebs.Pages;
public class TruePaletteModel : PageModel
{
private readonly ILogger<TruePaletteModel> _logger;
public TruePaletteModel(ILogger<TruePaletteModel> logger)
{
_logger = logger;
}
public void OnGet()
{
}
}
\ No newline at end of file
File added
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
const bre = () => {
const dict = [];
dict[1] = "#6F3144 #A1552A #CB6042 #D48341 #FBAB34 #CF9B9B";
dict[2] = "#CBBED8 #F8D6CB #CCC969 #E5CEB9 #9B8B81 #242424";
dict[3] = "#f0213b #ba8f2a #984900 #b9a68a #7f093f #434a16";
dict[4] = "#1e81b0 #eeeee4 #e28743 #eab676 #76b5c5 #21130d";
dict[5] = "#FFFFC2 #FFBEE2 #E7BDF1 #DAFFC1 #FCFF78 #FDB0B0";
dict[6] = "#18B8FE #1A6785 #3776BD #2D50B1 #3324E4 #159A76";
dict[7] = "#FAB162 #FB0D12 #18AE26 #3E2816 #FE7707 #FEB163";
dict[8] = "#0B2C02 #232922 #1C150D #413629 #773A03 #876239";
dict[9] = "#C1A676 #9A9D99 #504745 #9F7054 #DEDBD3 #676A5E";
dict[10] = "#0A4C60 #148284 #84C9AF #E3D196 #E88007 #BC5207";
dict[11] = "#FFD6DA #FFC6D0 #E1F7E7 #D1EAF5 #C3D6F2 #768CCE";
dict[12] = "#204362 #16879E #97E5DB #5FD1B8 #5C5C60 #CACACA";
dict[13] = "#FFEADA #FFD5A4 #FFB5A4 #FDEAC3 #F4CBB1 #C8A18F";
dict[14] = "#F0E6E4 #F7D8DF #F47D85 #DF4C5B #989E6A #5D6E4A";
dict[15] = "#DBE5CE #6FB1B4 #3A727F #274B58 #F2D58F #F9ECD1";
dict[16] = "#37D3EE #D5A6C7 #F99DB0 #B0D197 #F0E9EB #FAC5D4";
dict[17] = "#F9D8C5 #FCBDAB #94D183 #6EBDA8 #269493 #20485A";
dict[18] = "#37898C #9DD8D4 #C4E9E4 #F0D9C7 #FCD0D0 #F79CB1";
dict[19] = "#235680 #B0D5D5 #E0F0ED #F9B0CC #BB648D #C999BB";
dict[20] = "#7A5758 #DBBBBC #C897C4 #AD7CB3 #975794 #294867";
dict[21] = "#C44953 #E86C74 #F48F82 #F7BBA0 #6D5F69 #E7E6E4";
dict[22] = "#DCF4F5 #ACE0DD #FA6690 #FEC0CF #FEEBF2 #AE7F6C";
dict[23] = "#EADFF2 #DCCBED #FEE5EB #FCB7D0 #F07BBB #9979C1";
dict[24] = "#FDBF9C #F17173 #E23F6A #C63E81 #823E88 #AA66A5";
let number = Math.floor(Math.random() * 24) + 1;
const phrase = dict[number];
const words = phrase.split(' ');
const leColor = [];
for (let i = 0; i <= 5; i++)
{
leColor.push(words[i]);
}
palColor.innerHTML = leColor[0];
context.fillStyle = leColor[0];
context.fillRect(110, 0, 70, 100);
document.getElementById("palColor").style.color = leColor[0];
palColor2.innerHTML = leColor[1];
context.fillStyle = leColor[1];
context.fillRect(180, 0, 70, 100);
document.getElementById("palColor2").style.color = leColor[1];
palColor3.innerHTML = leColor[2];
context.fillStyle = leColor[2];
context.fillRect(250, 0, 70, 100);
document.getElementById("palColor3").style.color = leColor[2];
palColor4.innerHTML = leColor[3];
context.fillStyle = leColor[3];
context.fillRect(320, 0, 70, 100);
document.getElementById("palColor4").style.color = leColor[3];
palColor5.innerHTML = leColor[4];
context.fillStyle = leColor[4];
context.fillRect(390, 0, 70, 100);
document.getElementById("palColor5").style.color = leColor[4];
palColor6.innerHTML = leColor[5];
context.fillStyle = leColor[5];
context.fillRect(460, 0, 70, 100);
document.getElementById("palColor6").style.color = leColor[5];
}
document.getElementById("gsetNew").addEventListener("click", bre);
bre();
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment